<!--
 * @Description: 
 * @Date: 2023-02-20 17:51:11
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 10:46:18
-->
<template>
	<div class="xiang-meng">
		<div class="header">{{ $t("base.n5-name") }}</div>
		<div class="body">
			<!-- 招募图片 -->
			<el-image :src="cosPrefix + 'three-level/xiangmeng/yunchuangke/chuangyehezuo/yuncunminzhaomu.png'"></el-image>
			<div class="title">热门游记</div>
			<div class="list">
				<div class="list-item" @click="pageJump('/news-detail', { id: i.id })" v-for="(i, index) in noteList" :key="index">
					<div class="item-title">{{ i.title }}</div>
					<div class="item-content">{{ i.content }}</div>
					<div class="item-avatar">
						<el-image :src="i.avatar" style="width: 32px; height: 32px; margin-right: 10px; border-radius: 50%" fit="cover"></el-image>
						<span>{{ i.name }}</span>
					</div>
				</div>
			</div>
			<span class="more" @click="pageJump('/xiang-meng/detail', { categoryIndex: 1, key: 'XiangYouQuan' })">{{ $t("index.more") }}</span>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
import { useI18n } from "vue-i18n";

const { pageJump } = useVR();
const { cosPrefix } = useBaseStore();
const i18n = useI18n();
const noteList = computed(() => [
	{
		name: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.name"),
		avatar: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/avatar.jpg",
		title: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.title"),
		content: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.desc")
	},
	{
		id: 1,
		name: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.name2"),
		avatar: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/avatar.jpg",
		title: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.title2"),
		content: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.desc2")
	}
]);
</script>
<style lang="scss" scoped>
.xiang-meng {
	position: relative;
	z-index: 9;
	.header {
		font-size: 36px;
		font-weight: bold;
		color: rgb(51 51 51 / 100%);
		text-align: center;
	}
}

@media all and (max-width: 750px) {
	.xiang-meng {
		margin-top: 16px;
		.header {
			font-size: 28px;
		}
		.body {
			padding: 16px;
			.title {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-family: SourceSerif;
				font-size: 16px;
				font-weight: bold;
				color: $theme-color;
				border-bottom: 1px solid $theme-color;
				&::after {
					width: 112px;
					height: 4px;
					margin-top: 8px;
					margin-bottom: -3px;
					content: "";
					background-color: $theme-color;
				}
			}
			.list {
				.list-item {
					width: 100%;
					padding: 16px;
					margin-top: 16px;
					cursor: pointer;
					border: 1px solid #cccccc;
					border-radius: 4px;
					.item-title {
						font-size: 16px;
						font-weight: bold;
						&:hover {
							color: rgb(41 88 192);
							text-decoration: underline;
						}
					}
					.item-content {
						margin-top: 4px;
						margin-bottom: 6px;
						font-size: 14px;
						color: #666666;
					}
					.item-avatar {
						display: flex;
						align-items: center;
						font-size: 14px;
						.el-image {
							width: 24px !important;
							height: 24px !important;
						}
					}
				}
			}
		}
	}
}
</style>
